import React from 'react';
import { Row, Col, Form, Input, Button, Spin, Table, Select, Popconfirm, Card } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../../utils';
import { DEFAULT_PAGE_SIZE } from '../../../utils/constants';
import styles from '../../common.css';
import ProjectModal from './ProjectModal';


const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

@Form.create()
class ProjectTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      panelVisible: false, // 定义是否显示新增/编辑弹窗页面
      searchButtonVisible: true, // 查询按钮是否可用
    };
  }
    // 全局监听事件
  componentDidMount(){
    document.addEventListener('keyup',this.onKeyDown);
  }
  componentWillUnmount(){
    document.removeEventListener('keyup',this.onKeyDown);
  }
  // 添加事件
  onKeyDown=(e) => {
    if(e.keyCode===13){
      this.handleSearch()
    }
  }
  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      // console.log(data)
      dispatch({ // 调用接口，请求数据
        type: 'project/fetchProject', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          getparams: data,
        },
      });
    });
  };
  handleAddProject = () => {
    this.setState({ // 设置状态树
      currentRecord: {},  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible: false,
    });
  };
  handleUpdateProject = (record) => {
    this.setState({ // 设置状态树
      currentRecord: record,  // 
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible: true,
    });
  };
  handleDeleteProject = (record) => {
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    dispatch({ // 调用接口，请求数据
      type: 'project/deleteProject', //  models的namespace + effects的方法名，也可以是reducers的方法
      payload: {
        param: record,
      },
    });
  };
  //手动同步jira数据
  handleExecuteJobs = () => {
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    dispatch({ // 调用接口，请求数据
      type: 'project/executeJobs', //  models的namespace + effects的方法名，也可以是reducers的方法
    });
  };
  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, projectinfo, projectlist, form: { getFieldDecorator } } //
      = this.props;
    // console.log("table里面获取到的jira项目信息",projectlist)
    // 定义表头字段及取值内容
    const columns = [
      // {
      //   title: 'ID',
      //   dataIndex: 'id',
      //   key: 'id',
      // },
      {
        title: '项目JIRA-ID',
        dataIndex: 'project_id',
        key: 'project_id',
      },
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '项目JIRA-KEY',
        dataIndex: 'english_name',
        key: 'english_name',
      },
      {
        title: '项目看板ID',
        dataIndex: 'board_id',
        key: 'board_id',
      },
      {
        title: '测试报告接收邮箱',
        dataIndex: 'send_testreport_to',
        key: 'send_testreport_to',
      },
      {
        title: '冒烟报告接收邮箱',
        dataIndex: 'send_smokereport_to',
        key: 'send_smokereport_to',
      },
      {
        title: '项目成员',
        dataIndex: 'project_member',
        key: 'project_member',
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
        render: (text, record) => {
          // const d1 = moment(text).utc(); // utc 时间转换成本地时间
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div className={styles.operation}  >
              <a
                onClick={() => this.handleUpdateProject(record)}
              >
                修改  
              </a>
              {/* <a
                onClick={() => this.handleDeleteProject(record)}
              >
                删除
              </a> */}
              {/* onConfirm={this.xxx()} 这样才是及时调用了,因为函数后面跟括号会直接调用。所以调用不带参数的函数，千万不要加括号。如果要加，则需要用箭头函数从新申明一个函数，避免及时调用出现死循环。
              onConfirm={() => this.xxx()}  这样确实是运行了代码。但是只是申明。不会执行函数本身
              因为 () => this.xxx()  等于。() => { this.xxx() }
              等于 const xx111 = () => { this.xxx() }. 也就是。 onConfirm={this.xx111} */}
              <Popconfirm title={'删除后对应的测试报告等数据也将删除，是否删除？'} onConfirm={()=>this.handleDeleteProject(record)}  >
              <a href="#">删除</a>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    const modalProps = {
      dispatch,
      loading,
      projectinfo,
      projectlist,
      visible: this.state.panelVisible,
      currentUser: this.state.currentRecord,
      ButtonVisible: this.state.searchButtonVisible,
      onCancel: () => {
        this.setState({
          currentRecord: {},
          panelVisible: false,
          searchButtonVisible: false,
        });
      },
    };
    return (
      <div>
        {
          this.state.panelVisible ?
            (
              <ProjectModal {...modalProps} />
            ) :
            (
              <div>
                <Card style={{ marginBottom: 16 }}>
                  <Row gutter={24}>
                    <Form>
                      <Col span={6}>
                        <FormItem
                          label="项目名称"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('name', {
                            initialValue: '',
                          })(
                                <Select
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                              >
                                <Option key={-1} value="">请选择项目名称</Option>
                                {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                                  projectinfo.map((item, index) => {
                                    return (<Option key={index} value={item.name}>{item.name}</Option>);
                                  })
                                }
                              </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col span={6}>
                        <div>
                          <Button style={{ margin: 8 }}  type="primary" loading={loading} onClick={this.handleSearch}>查询</Button>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className={styles.btnGroup} >
                        <Popconfirm title={'当定时任务执行失败时可手动同步Jira明细数据，是否同步？'} onConfirm={this.handleExecuteJobs}  >
                          <a><Button style={{ margin: 8 }}  type="primary" loading={loading} >手动同步JIRA明细</Button></a>
                        </Popconfirm>
                          <Button style={{ margin: 8 }}  type="primary" onClick={this.handleAddProject}>新增</Button>
                        </div>
                      </Col>
                    </Form>
                  </Row>
                </Card>
                <Table
                  columns={columns}
                  dataSource={projectinfo}
                  loading={loading}
                  rowKey={record => record.id}
                  pagination={{
                    pageSize: DEFAULT_PAGE_SIZE,
                  }}
                  bordered
                />
              </div>
            )
        }
      </div>
    );
  }
}

export default ProjectTable;
